<template>
  <!-- 订单评论 -->
  <!-- 产品管理页 -->
  <div class="product">
    <!-- 头部区域 -->
    <div class="header">
      <!-- 添加按钮 -->
      <el-button type="primary" @click="addcomment">添加</el-button>
      <!-- 产品名称输入框 -->
      <el-input
        v-model="commentName"
        style="width: 240px"
        placeholder="请输入评论内容"
        clearable
      />
      <el-input
        v-model="commentId"
        style="width: 240px"
        placeholder="请输入订单编号"
        clearable
      />
      <!-- 产品状态下拉框 -->
      <el-select v-model="commentStatus" clearable placeholder="请选择状态">
        <el-option label="通过" value="通过" />
        <el-option label="不通过" value="不通过" />
        <el-option label="未审核" value="未审核" />
      </el-select>
      <el-button type="primary" @click="queryComment">查询</el-button>
    </div>
    <!-- 表格内容展示区 -->
    <div class="table_content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="180" />
        <el-table-column prop="content" label="评论内容" width="180" />
        <el-table-column prop="customerId" label="顾客编号" />
        <el-table-column prop="orderId" label="订单编号" />
        <el-table-column prop="commentTime" label="评论时间">
          <template slot-scope="scope">
            {{ scope.row.commentTime | fmtDate }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="评论状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status == '通过' ? 'success' : scope.row.status == '不通过' ?'danger': scope.row.status == '未审核' ?'info':'warning'">{{
              scope.row.status
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button style="color: Light green" type="text" size="small" @click="pass(scope.row.id)">通过</el-button>
            <el-button style="color: blue" type="text" size="small" @click="deId = scope.row.id ; dialogVisible2=true">删除</el-button>
            <el-button style="color: red" type="text" size="small" @click="nopass(scope.row.id)">不通过</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paginetion">
      <!-- 分页组件 -->
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 模态框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <el-form
        ref="product_form"
        :model="commentForm"
        :rules="rules"
        label-width="80px"
      >
      
        <!-- 产品名称 -->
        <el-form-item label="评论内容" prop="content">
          <el-input v-model="commentForm.content" />
        </el-form-item>
        <el-form-item label="订单编号" prop="orderId">
          <el-select v-model="commentForm.orderId" placeholder="请选择订单编号">
        <el-option
          v-for="orderId1 in orderId1 "
          :key="orderId1.id"
          :label="orderId1.id"
          :value="orderId1.id"
        ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="顾客编号" prop="customerId">
          <el-select v-model="commentForm.customerId" placeholder="请选择顾客编号">
            <el-option
          v-for="customerId in customerId1 "
          :key="customerId.id"
          :label="customerId.id"
          :value="customerId.id"
        ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 底部操作按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <!-- 提交表单后 调用重置表单的方法 -->
        <el-button type="primary" @click="submitForm">
          确 定
        </el-button>
      </span>
    </el-dialog>

    <!-- 删除的模态框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible2" width="30%">
      <span>是否删除该评论</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="delete1()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from '@/utils/request'
import { fmtDate } from '@/filters/index'
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      // 每页要展示的数据条数
      pageSize: 6,
      // 页面展示数据的总条数
      total: 20,
      // 评论关键字
      commentName: '',
      // 评论订单编号
      commentId: '',
      // 评论状态:
      commentStatus: '',
      // 定一个查询的参数
      queryData: {},
      // 控制模态框显隐
      dialogVisible: false,
      dialogVisible2: false,
      // 获取的删除的id
      deId: '',
      // 模态框标题
      dialogTitle: '加点评论',
      //
      commentForm: {
        // 评论内容
        content: '',
        // 订单编号
        orderId: '',
        // 顾客编号
        customerId: ''
      },
      //存放获取到的顾客编号
      customerId1:'',
      //存放获取到的订单编号
      orderId1:'',
      rules: {
        content: [{ required: true, message: '请输入评论内容', trigger: 'blur' }],
        orderId: [{ required: true, message: '请选择订单编号', trigger: 'change' }],
        customerId: [{ required: true, message: '请选择订单编号', trigger: 'change' }]
      }
    }
  },
  computed: {},
  created() {
    this.getAllProductData()
    this.FindcustomerId()
    this.getAllOrder()
  },
  mounted() {},
  methods: {
    async getAllProductData() {
      // 获取参数
      const data = {
        page: this.currentPage,
        pageSize: this.pageSize
      }
      // queryData 和 data 结合成一个对象呢？
      // console.log({...data, ...this.queryData});
      // 通过对应的参数发送网络请求 获取产品数组数据
      const res = await get('/orderComment/pageQuery', { ...data, ...this.queryData })
      // 将data中的产品数组 进行赋值
      this.tableData = res.data.list
      // 页面总数据条数 赋值
      this.total = res.data.total
    },
    handleSizeChange(val) {
      // 将每页要展示的数据的条数 进行一个更新
      this.pageSize = val
      // 将当前的页数 重置到第一页
      this.currentPage = 1
      // 重新调用获取所有产品数据的方法
      this.getAllProductData()
    },
    /**
     * @description: 控制当前显示的页数
     * @param {*} val 当前的页码
     * @return {*}
     * @author: ZachGmy
     */
    handleCurrentChange(val) {
      // 将当前页数 与 分页插件动态点击控制的页数相绑定
      this.currentPage = val
      // 重新调用获取所有产品数据的方法
      this.getAllProductData()
    },
    async delete1() {
      const data = {
        id: this.deId
      }
      const res = await get('/orderComment/deleteById', data)
      // 给用户一个成功或失败的提示
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: 'success'
        })
        // 重新刷新页面的数据
        this.getAllProductData()
      } else {
        this.$message.error(res.message)
      }
       this.dialogVisible2 = false
    },
    async pass(id) {
      const res = await post('/orderComment/checkPass', { id })
      // 给用户一个成功或失败的提示
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: 'success'
        })
        // 重新刷新页面的数据
        this.getAllProductData()
      } else {
        this.$message.error(res.message)
      }
    },
    async nopass(id) {
      const res = await post('/orderComment/checkNoPass', { id })
      // 给用户一个成功或失败的提示
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: 'success'
        })
        // 重新刷新页面的数据
        this.getAllProductData()
      } else {
        this.$message.error(res.message)
      }
    },
    // 查找评论
    queryComment() {
      const data = {
        // 评论关键字
        content: this.commentName,
        // 评论状态
        status: this.commentStatus,
        // 订单评论的编号
        orderId: this.commentId
      }
      // 格式化参数 当某个属性没有值的时候 将其删除掉 以防影响网络请求的操作
      for (const key in data) {
        if (!data[key]) {
          delete data[key]
        }
      }
      // 将参数 赋值给 queryData
      this.queryData = data
      // 将页数强制回到第一页
      this.currentPage = 1
      // 重新加载产品数据
      this.getAllProductData()
    },
    // 显示添加评价模态框
    addcomment() {
      this.dialogVisible = true
    },
    // 提交表单
    submitForm() {
      this.$refs['product_form'].validate(async(valid) => {
        if (valid) {
          // 发送表单验证的请求 提交表单对象
          const res = await post('/orderComment/submit', this.commentForm)
          // 给用户一个成功的提示
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            })
            // 重新刷新页面的数据
            this.getAllProductData()
            // 调用关闭模态框的方法
            this.dialogClose()
          } else {
            this.$message.error(res.message)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 关闭模态框 调用表单重置的方法
    dialogClose() {
      // 重置表单
      this.$refs['product_form'].resetFields()
      // 关闭模态框
      setTimeout(() => {
        this.dialogVisible = false
      }, 200)
    },
    //查询用户编号
    async FindcustomerId(){
      let data = {
        page:1,
        pageSize:100,
        roleId:6
      }
      let res = await get ('/baseUser/pageQuery',{...data})
      this.customerId1 = res.data.list
    },
    //查询订单编号
    async getAllOrder() {
      const data = {
        page: 1,
        pageSize: 100
      }
      const res = await get('/order/pageQuery', { ...data })
      this.orderId1 = res.data.list
      console.log(res)
    },
  }
}
</script>
<style scoped>
.el-button--primary {
    color: #fff;
    background-color: pink;
    border-color: pink;
}
</style>
